<template>
		<div id="three">
		</div>
</template>

<script>
import MainUiButton from "../components/button/Ra3UiButton.vue"
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
import { CSS2DRenderer,CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js"
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
export default {
  name: 'Scene',
  data(){
	  return{
		  screenWidth: document.body.clientWidth,
		  publicPath:process.env.VUE_APP_BASE_TEXTURE
	  }
  },
  mounted() {
	  this.initWindow()
	  this.init()
	  this.render()
  },
  watch: {
      screenWidth (val) {
		this.camera.aspect = val / window.innerHeight;
		this.camera.updateProjectionMatrix();
		this.renderer.setSize(val,window.innerHeight);
		this.labelRenderer.setSize(val,window.innerHeight);
      }
    }, 
  methods:{
		init(){
			const three = document.getElementById("three");
			this.clock = new THREE.Clock();
			this.textureLoader = new THREE.TextureLoader();
			// 地球和月球的半径大小
			const EARTH_RADIUS = 2.5;
			const MOON_RADIUS = 0.5;
			// 实例化相机
			this.camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,200);
			this.camera.position.set(10,5,20);
			// 实例化场景
			this.scene = new THREE.Scene();
			// 创建聚光灯光源
			const dirLight = new THREE.SpotLight(0xffffff);
			dirLight.position.set(0,0,60);
			dirLight.intensity = 2;
			dirLight.castShadow = true;
			this.scene.add(dirLight);
			
			// 添加环境光
			const aLight = new THREE.AmbientLight(0xffffff);
			aLight.intensity = 0.3;
			this.scene.add(aLight);
			
			
			// 添加月球
			const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS,16,16);
			const moonMaterial = new THREE.MeshPhongMaterial({
				map:this.textureLoader.load('/texture/moon_1024.jpg')
			});
			this.moon = new THREE.Mesh(moonGeometry,moonMaterial);
			this.moon.receiveShadow = true;
			this.moon.castShadow = true;
			this.scene.add(this.moon);
			
			// 添加地球
			const eathGeometry = new THREE.SphereGeometry(EARTH_RADIUS,16,16);
			const eathMaterial = new THREE.MeshPhongMaterial({
				shininess:5,
				map:this.textureLoader.load('/texture/earth_atmos_4096.jpg'),
				specularMap:this.textureLoader.load('/texture/earth_specular_2048.jpg'),
				normalMap:this.textureLoader.load('/texture/earth_normal_2048.jpg')
			});
			this.earth = new THREE.Mesh(eathGeometry,eathMaterial);
			this.earth.receiveShadow = true;
			this.earth.castShadow = true;
			this.scene.add(this.earth);
			
			// 创建渲染器
			this.renderer = new THREE.WebGLRenderer({
				alpha: true
			});
			this.renderer.setPixelRatio(window.devicePixelRatio);
			this.renderer.setSize(window.innerWidth,window.innerHeight);
			// 渲染阴影
			this.renderer.shadowMap.enabled = true;
			three.appendChild(this.renderer.domElement);
			this.renderer.render(this.scene, this.camera);
			
			// 创建标签渲染器
			this.labelRenderer = new CSS2DRenderer();
			this.labelRenderer.setSize(window.innerWidth,window.innerHeight);
			this.labelRenderer.domElement.style.position = 'absolute';
			this.labelRenderer.domElement.style.zIndex = '0';
			this.labelRenderer.domElement.style.top = '0px';
			three.appendChild(this.labelRenderer.domElement);
			// 创建控件对象
			const controls = new OrbitControls(this.camera,this.labelRenderer.domElement);
			
			// 添加地球标题控件
			const earthDiv = document.createElement('div');
			earthDiv.className = 'label';
			earthDiv.textContent = 'Earth'
			const earthLabel = new CSS2DObject(earthDiv);
			earthLabel.position.set(0,EARTH_RADIUS+0.5,0);
			this.earth.add(earthLabel);
			
			var loader = new OBJLoader();
			loader.load('/model/nato/natoLogo/i.obj',(res)=>{
				let obj = res
				obj.scale.set(0.0001,0.0001,0.0001)
				obj.position.set(60,0,0)
				console.log(obj.position)
				console.log(res)
				this.scene.add(obj)
			})
			
			// 添加月球标题控件
			const moonDiv = document.createElement('div');
			moonDiv.className = 'label';
			moonDiv.textContent = 'Moon';
			const moonLabel = new CSS2DObject(moonDiv);
			moonLabel.position.set(0,MOON_RADIUS+0.5,0);
			this.moon.add(moonLabel);
		},
		render(){
			// 月球旋转
			const elapsed = this.clock.getElapsedTime();
			this.moon.position.set(Math.sin(elapsed)*5,0,Math.cos(elapsed)*5);
			
			// 地球自转
			var axis = new THREE.Vector3(0,1,0);
			this.earth.rotateOnAxis(axis,0.01)
			// 执行渲染操作
			this.renderer.render(this.scene,this.camera);
			this.labelRenderer.render(this.scene,this.camera);
			// 请求再次执行渲染函数render
			requestAnimationFrame(this.render);
		},
		initWindow(){
			const that = this
			window.onresize = () => {
			      return (() => {
			        window.screenWidth = document.body.clientWidth
			        that.screenWidth = window.screenWidth
			      })()}
		}
  },
  components: {
	  MainUiButton
  }
}
</script>
<style scoped="scoped">
	#three{
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: url(../../public/texture/star.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.label{
		color: aliceblue;
		font-size: 30px;
	}
	
	.home{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 30px 0px 0px 40px;
		perspective: 500px;
	}

</style>
